<template>
    <div class="page_title">
        <p>单位管理</p>
        <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table :data="list">
        <el-table-column label="单位名称" prop="company_name"></el-table-column>
        <el-table-column label="单位简称(0/4)" prop="abbreviation"></el-table-column>
        <el-table-column label="LOGO">
            <template #default="scope">
                <img :src="scope.row.company_logo" />
            </template>
        </el-table-column>
        <el-table-column label="背景图片">
            <template #default="scope">
                <img :src="scope.row.login_background" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size='mini' @click="del(scope.row.company_id)">删除</el-button>
                <el-button size='mini' @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        @size-change="size_change"
        @current-change="current_change"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_count"
    ></el-pagination>
    <el-dialog
        width="30%"
        v-model="is_unit"
        :title="title"
        :close-on-press-escape='false'
        :close-on-click-modal='false'
        :show-close='false'
        center
    >
        <el-form :model="unit_info" label-position='right' label-width="80px" size='small'>
            <el-form-item label="单位名称">
                <el-input v-model="unit_info.company_name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="单位简称">
                <el-input v-model="unit_info.abbreviation" maxlength="4" show-word-limit placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="单位logo">
                <el-upload
                    class="avatar-uploader"
                    action="https://up-na0.qiniup.com/"
                    :show-file-list='false'
                    :data='{token}'
                    :on-success='get_company_logo'
                >
                    <img v-if="unit_info.company_logo" :src="unit_info.company_logo" class="avatar">
                    <i v-if="unit_info.company_logo" @click.stop="unit_info.company_logo = undefined" class="el-icon-close"></i>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="登录背景">
                <el-upload
                    class="avatar-uploader"
                    action="https://up-na0.qiniup.com/"
                    :show-file-list='false'
                    :data='{token}'
                    :on-success='get_login_background'
                >
                    <img v-if="unit_info.login_background" :src="unit_info.login_background" class="avatar">
                    <i v-if="unit_info.login_background" @click.stop="unit_info.login_background = undefined" class="el-icon-close"></i>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="info" round @click="cancel">取消</el-button>
            <el-button type="primary" round @click="confirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { unit_list, del_unit, get_qiniu, add_unit, edit_unit } from './../../utils/api'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
    setup() {
        let state = reactive({
            form: {
                pagesize: 10,
                page: 1
            },
            list: [],
            total_count: 0,
            title: '新增单位',
            is_unit: false,
            is_add: false,
            unit_info: {
                company_id: undefined,
                company_name: undefined,
                abbreviation: undefined,
                login_background: undefined,
                company_logo: undefined
            },
            url: undefined,
            token: undefined
        })

        get_qiniu().then(({ data }) => {
            if(data.code === 1000) {
                state.url = data.data.url
                state.token = data.data.token
            }
        })
        // 初始化
        const init = () => {
            unit_list(state.form).then(({ data }) => {
                if(data.code === 1000) {
                    state.list = data.data.data
                    state.total_count = data.data.total_count
                }
            })
        }
        // 分页
        const size_change = size => {
            state.form.page = 1
            state.form.pagesize = size
            init()
        }
        const current_change = page => {
           state.form.page = page
           init()
           window.scrollTo(0, 0)
        }
        // 上传
        const get_company_logo = file => {
            state.unit_info.company_logo = `${state.url}${file.key}`
        }
        const get_login_background = file => {
            state.unit_info.login_background = `${state.url}${file.key}`
        }
        // 新增单位
        const add = () => {
            state.is_unit = true
            state.is_add = true
            state.title = '新增单位'
        }
        // 删除单位
        const del = company_id => {
            ElMessageBox.confirm('确认删除此单位？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del_unit({ company_id }).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        init()
                    }
                })
            })
        }
        // 编辑单位
        const edit = item => {
            state.unit_info.abbreviation = item.abbreviation
            state.unit_info.company_id = item.company_id
            state.unit_info.company_name = item.company_name
            state.unit_info.login_background = item.login_background
            state.unit_info.company_logo = item.company_logo
            state.is_unit = true
            state.is_add = false
            state.title = '编辑单位'
        }
        // 确认
        const confirm = () => {
            if(state.is_add) {
                add_unit(state.unit_info).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        cancel()
                        init()
                    }
                })
            } else {
                edit_unit(state.unit_info).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        cancel()
                        init()
                    }
                })
            }
        }
        // 取消
        const cancel = () => {
            state.unit_info = {
                company_id: undefined,
                company_name: undefined,
                abbreviation: undefined,
                login_background: undefined,
                company_logo: undefined
            }
            state.is_unit = false
        }

        init()
        return {
            ...toRefs(state),
            size_change,
            current_change,
            del,
            add,
            get_company_logo,
            get_login_background,
            cancel,
            confirm,
            edit
        }
    }
})
</script>

<style lang="scss" scoped>
.page_title{
    display: flex;
    justify-content: space-between;
    p{
        align-self: center;
    }
}
.el-table{
    img{
        width: 50px;
    }
}
</style>